<template>
  <el-dialog :visible.sync="visible" title="数据导入" :close-on-click-modal="false" :close-on-press-escape="false">
    <el-upload class="text-center" drag ref="upload" :action="importData.importUrl" :multiple="falseFlag" :with-credentials="trueFlag" :show-file-list="falseFlag" :headers="importData.headers" :file-list="importData.fileList" :limit="1" accept=".xls,.xlsx" :on-success="uploadSucc">
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <div class="el-upload__tip" slot="tip">只能上传xls/xlsx文件，且不超过10mb<br />
      </div>
    </el-upload>
    <el-button slot="reference" icon="el-icon-upload" @click="importHandle()"></el-button>
  </el-dialog>
</template>

<script>
import qs from 'qs'
export default {
  data () {
    return {
      visible: false,
      trueFlag: true,
      falseFlag: false,
      themeId: '',
      importData: {
        uploadVisible: false,
        importUrl: '',
        headers: {
          token: this.$cookies.get('token')
        }
      }
    }
  },
  methods: {
    init () {
      var params = qs.stringify({
        themeId: this.themeId
      })
      this.visible = true
      this.importData.importUrl = `${window.SITE_CONFIG['apiURL']}/cpn/cpnData2/importData?${params}`
    },
    importHandle () {
      this.importData.uploadVisible = true
    },
    uploadSucc (res, file, fileList) {
      this.importData.uploadVisible = false
      this.$refs.upload.clearFiles()
      this.$message({
        message: this.$t('prompt.success'),
        type: 'success',
        duration: 500,
        onClose: () => {
          this.visible = false
          this.$emit('setDataList', res)
        }
      })
    }
  }
}
</script>
